<template>
  <div class="section" ref="parent">
    <div class="border-row"></div>
    <div class="border-col"></div>
    
    <div class="section-header">各镇街用人单位岗位需求人数</div>
    <div id="charts" ref="charts" :style="chartsDom" v-show="jz"></div>
             <animae-jz  :style="chartsDom" v-if="!jz"></animae-jz>
    
  </div>
</template>
<script>
import { get_JobTable_JobDistribution } from '@/api/data'
export default {
  data() {
    return {
      chartsDom: {},
      chartData: null,
      jz:true
    }
  },
  props: ['height','dateProp'],
  computed: {
    setStyle: {
      get() {
        return this.$refs.parent.offsetWidth
      },
      set(val) {
        this.chartsDom = {
        width: val - 30 + 'px',
        height: this.height - 30 - 31 + 'px',
        'z-index': 100,
        position: 'relative',
        // 'background-color': 'red'
      }
      }
    }
  },
  mounted() {
    this.setStyle = this.setStyle;
    this.$nextTick(_=>{
      this.init();
    })
  },
  methods: {
    init(){
      this.jz=false
      get_JobTable_JobDistribution(this.dateProp)
      .then(({data:{data}})=>{
        this.jz=true
        this.chartData = data;
        this.drawChart();
      })
    },
    drawChart() {
      let option = {
          grid: {
            top: 15,
            bottom: 20
          },
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c}'
          },
          xAxis: {
              type: 'category',
              data: this.chartData.map(v=>v.AreaName),
              axisLabel: {
                textStyle: {
                  color: 'rgba(255,255,255,1)'
                }
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              }
          },
          yAxis: {
              type: 'value',
              axisLabel: {
                textStyle: {
                  color: 'rgba(255,255,255,.3)'
                }
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              }
          },
          series: [{
              data: this.chartData.map(v=>v.Number),
              type: 'bar',
              barWidth: 30,
              name:'岗位需求人数',
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(
                    0, 1, 0, 0,
                    [
                        {offset: 0, color: '#2a8ad0'},
                        {offset: 1, color: '#3af3ce'}
                    ]
                )
              }
          }]
      };
      let chartsInit = this.$echarts.init(this.$refs.charts);
      chartsInit.setOption(option);
    }
  },
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
    margin-top 20px
</style>